import {Table, TableColumn, Tree} from 'element-ui'

export default {
  components: {Tree, Table, TableColumn},
  props: {
    leftDataUrl: String, // 穿梭框左侧数据（即右表数据）选项的查询接口。
    leftQueryParams: Object, // 穿梭框左侧数据（即右表数据）选项的查询条件。
    leftField: String, // 中间表的字段，关联到左表（即当前表）。
    leftValue: [String, Number], // 在左表模块(即当前模块)中管理中间表，此值为左边模块中选中的数据ID。
    leftTitle: { // 穿梭框左侧标题
      type: String,
      default: '可选项'
    },
    //
    rightAddUrl: String, // 穿梭框右侧数据（即中间表数据）的添加接口。
    rightDeleteUrl: String, // 穿梭框右侧数据（即中间表数据）的删除接口。
    rightField: String, // 中间表的字段，关联到右表。
    rightTitle: { // 穿梭框右侧标题
      type: String,
      default: '已选项'
    },
    //
    warnMessage: {
      type: String,
      default: '数据会实时保存，请谨慎操作！'
    },
    height: Number // 面板选项数据的高度
  },
  data() {
    return {
      leftTreeData: null,
      leftLoading: false,
      queryLeftTreeData: window.$debounce(this._queryLeftTreeData),
      rightTreeData: null,
      rightLoading: false,
      queryRightTreeData: window.$debounce(this._queryRightTreeData),
      checkedKeys: [],
      initLeftDisabledOptions: window.$debounce(this._initLeftDisabledOptions),
      rightQueryParams: null,
    }
  },
  mounted() {
    this.initRightQueryParams()
    this.initLeft()
    this.initRight()
  },
  watch: {
    leftDataUrl() {
      this.initLeft()
    },
    leftQueryParams() {
      this.initLeft()
    },
    leftValue() {
      this.initRightQueryParams()
    },
    rightQueryParams() {
      this.initRight()
    },
    leftTreeData() {
      this.initLeftDisabledOptions()
    },
    rightTreeData() {
      this.initLeftDisabledOptions()
    }
  },
  methods: {
    initRightQueryParams() {
      if (this.leftValue) {
        const queryParams = {}
        queryParams[this.leftField] = this.leftValue
        if (this.leftQueryParams) {
          for (let key in this.leftQueryParams) {
            queryParams[key] = this.leftQueryParams[key]
          }
        }
        this.rightQueryParams = queryParams
      } else {
        this.rightQueryParams = null
      }
    },
    initLeft() {
      this.queryLeftTreeData()
    },
    initRight() {
      this.queryRightTreeData()
    },
    _initLeftDisabledOptions() {
      if (this.leftTreeData && this.rightTreeData) {
        this.checkedKeys = []
        this._setLeftDisabledOptions(this.leftTreeData, this.rightTreeData)
        this.$nextTick(() => {
          this.$refs.leftTree.setCheckedKeys(this.checkedKeys)
          this.$refs.rightTree.setCheckedKeys(this.checkedKeys)
        })
      }
    },
    _setLeftDisabledOptions(leftOptions, rightOptions) {
      leftOptions.forEach((leftOption) => {
        const existed = this._existedInRight(leftOption, rightOptions)
        if (existed) {
          this.$set(leftOption, "disabled", true)
          this.checkedKeys.push(leftOption.id)
        } else {
          this.$set(leftOption, "disabled", false)
        }
        if (leftOption.children && leftOption.children.length > 0) {
          this._setLeftDisabledOptions(leftOption.children, rightOptions)
        }
      })
    },
    _existedInRight(leftOption) {
      return this._existedInOptions(leftOption, this.rightTreeData)
    },
    _existedInOptions(leftOption, rightOptions) {
      let existed = false;
      rightOptions.forEach((rightOption) => {
        if (leftOption.id === rightOption.id) {
          existed = true
          return true
        }
        if (rightOption.children && rightOption.children.length > 0) {
          if (this._existedInOptions(leftOption, rightOption.children)) {
            existed = true
            return true
          }
        }
      })
      return existed
    },
    _queryLeftTreeData() {
      this.leftLoading = true
      this.$http.post(this.leftDataUrl, this.leftQueryParams).then((rs) => {
        this.leftLoading = false
        const result = rs.data
        if (result.success) {
          this.leftTreeData = result.data
        } else {
          this.leftTreeData = []
        }
      })
    },
    _queryRightTreeData() {
      // 查询右边数据时必须要带参数
      if (!this.rightQueryParams) {
        this.rightTreeData = []
        return
      }
      this.rightLoading = true
      this.$http.post(this.leftDataUrl, this.rightQueryParams).then((rs) => {
        this.rightLoading = false
        const result = rs.data
        if (result.success) {
          this.rightTreeData = result.data
        } else {
          this.rightTreeData = []
        }
      })
    },
    addRightData(data) {
      if (this.leftValue) {
        if (!data || !data.id) {
          return
        }
        const formData = {}
        formData[this.leftField] = this.leftValue
        formData[this.rightField] = data.id
        this._add(formData)
      }
    },
    _add(formData) {
      this.$http.post(this.rightAddUrl, formData).then((rs) => {
        const result = rs.data
        if (result.success) {
          const queryParams = {}
          queryParams[this.leftField] = this.leftValue
          this.rightQueryParams = queryParams
        } else {
          this.$message.error(result.message)
        }
      })
    },
    deleteRightData(data) {
      if (this.leftValue) {
        if (!data || !data.id) {
          return
        }
        const formData = {}
        formData[this.leftField] = this.leftValue
        formData[this.rightField] = data.id
        this._delete(formData)
      }
    },
    _delete(formData) {
      this.$http.post(this.rightDeleteUrl, formData).then((rs) => {
        const result = rs.data
        if (result.success) {
          const queryParams = {}
          queryParams[this.leftField] = this.leftValue
          this.rightQueryParams = queryParams
        } else {
          this.$message.error(result.message)
        }
      })
    },
    doLeftCheckChange(data, checked) {
      if (!data.disabled && checked) {
        this.addRightData(data)
      }
    },
    doRightCheckChange(data, checked) {
      if (!data.disabled && !checked) {
        this.deleteRightData(data)
      }
    }
  }
}